<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员卡列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="add">
          <el-button type="primary" @click="show = true;dialogTitle='添加会员卡'">添加会员卡</el-button>
      </div>
      <el-card>
          <el-table
              :data="productList"
              stripe
              border
              style="width: 100%">
              <el-table-column
                  prop="name"
                  label="会员卡名称">
              </el-table-column>
              <el-table-column
                  prop="yard"
                  label="场地名称">
                  <template slot-scope="scope">
                      <div>
                          {{scope.row.yard.name}}
                      </div>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="suit"
                  label="适用范围">
                  <template slot-scope="scope">
                      <div>
                          {{ scopeList[scope.row.suit - 1].value }}
                      </div>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="duration"
                  label="有效天数（天）">
              </el-table-column>
              <el-table-column
                  prop="rule"
                  label="会员卡规则">
              </el-table-column>
              <el-table-column
                  prop="message"
                  label="价值描述">
              </el-table-column>
              <el-table-column
                  prop="price"
                  label="购买价格">
              </el-table-column>
              <el-table-column
                  prop="value"
                  label="使用价值">
              </el-table-column>
              <el-table-column
                  width="200"
                  fixed="right"
                  label="操作">
                  <template slot-scope="scope">
                      <div class="tool">
                          <el-button type="primary" @click="changeCommodity(scope.row)">修改</el-button>
                          <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </el-card>

      <el-dialog :title="dialogTitle" :visible.sync="show" @close="()=>{resetForm('productForm')}">
          <el-form :model="productForm" :rules="productFormRules" ref="productForm">
              <el-form-item label="会员卡名称" prop="name">
                  <el-input v-model="productForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="场地名称" prop="yardId">
                  <el-select v-model="productForm.yardId" placeholder="请选择">
                      <el-option
                          v-for="item in yardList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="适用范围" prop="suit">
                  <el-select v-model="productForm.suit" placeholder="请选择">
                      <el-option
                          v-for="item in scopeList"
                          :key="item.id"
                          :label="item.value"
                          :value="item.id">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="有效天数（天）" prop="duration">
                  <el-input type="number" el-input v-model="productForm.duration" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="会员卡规则" prop="rule">
                  <el-input el-input v-model="productForm.rule" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价值描述" prop="message">
                  <el-input el-input v-model="productForm.message" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="购买价格" prop="price">
                  <el-input type="number" el-input v-model="productForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="使用价值" prop="value">
                  <el-input type="number" el-input v-model="productForm.value" autocomplete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="()=>{resetForm('productForm');show = false;}">取 消</el-button>
              <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>
          </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            yardList:[],
            scopeList:[{
              id:1,
              value:'租赁'
            },{
              id:2,
              value:'商场'
            },{
              id:3,
              value:'商场与租赁'
            },{
              id:4,
              value:'订场'
            },{
              id:5,
              value:'订场与租赁'
            },{
              id:6,
              value:'订场与商品'
            },{
              id:7,
              value:'订场、商品与租赁'
            }],
            loading:false,
            dialogTitle:'',
            show:false,
            productList:[],
            productForm: {
                name: "",
                yardId: "", 
                suit: "", 
                duration: "" ,
                rule:"",
                message:"",
                price:"",
                value:"",

            },
            productFormRules: {
                name:[ { required: true, message: '请输入会员卡名称', trigger: 'blur' } ],
                yardId:[ { required: true, message: '请选择场地', trigger: 'blur' } ],
                suit:[ { required: true, message: '请选择适用范围', trigger: 'blur' } ],
                duration:[ { required: true, message: '请输入有效天数', trigger: 'blur' } ],
                rule:[ { required: true, message: '请输入使用规则', trigger: 'blur' } ],
                message:[ { required: true, message: '请输入vip卡价值描述', trigger: 'blur' } ],
                price:[ { required: true, message: '请输入购买价格', trigger: 'blur' } ],
                value:[ { required: true, message: '请输入使用价值', trigger: 'blur' } ],
            },
        }
    },
    async created(){
        this.getComputed()
        this.getList()
    },
    computed:{
        
    },
    methods:{
        async getList(){
            const { data } = await this.$http.get('venue/yard')
            if (data.state !== 0) return this.$message.error(data.msg)
            this.yardList = data.result
        },
        async getComputed(){
            const { data } = await this.$http.get('venue/vip')
            if (data.state !== 0) {
            return this.$message.error(data.msg)
            }
            this.productList = data.result
        },
        addCommodity(){
            this.$refs['productForm'].validate(async (valid) => {
                if(!valid) return
                let model = this.dialogTitle == '添加会员卡' ? "post" : "put"
                this.loading = true
                const { data } = await this.$http[model]('venue/vip',this.productForm)
                this.loading = false
                this.show = false
                this.resetForm('productForm')
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success(this.dialogTitle == '添加会员卡' ? "添加成功" : "修改成功")
            })
        },
        changeCommodity(item){
            this.dialogTitle = "修改商品"
            this.show =true
            let obj = JSON.stringify(item)
            let itemInfo = JSON.parse(obj)
            itemInfo.yardId = itemInfo.yard.id
            this.productForm = itemInfo
        },
        delCommodity(item){
            this.$confirm('是否删除该会员卡', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                console.log(item)
                const { data } = await this.$http.delete('venue/vip',{data:{id:item.id}})
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success("删除成功")
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
    .tool>.el-button{
        width: 70px;
    }
</style>